import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Radio from '../../ch/components/Radio.vue'

<Meta
  title="Components/Form/Input Radio"
  component={Radio}
  argTypes={{
    variant: {
      control: {
        type: 'select',
        options: ['outline', 'negative'],
      },
    },
    required:   { control: { type: 'boolean' } },
    size: { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    message: {},
    messageType: {
      control: {
        type: 'select',
        options: ['error', 'warning', 'success', 'info'],
      },
    }
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Radio },
  template: `
  <div>
    <Radio
      :variant="variant"
      :size="size"
      :label="label"
      :id="id"
      :name="name"
      :value="value"
      :message="message"
      :messageType="messageType"
      :required="required"
    />
    </div>
  `,
})

# Input Radio

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      variant
      : 'outline',
      size: 'base',
      label: 'Label',
      name: 'radio-name',
      id:'radio-id'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Radiobox negative type

- `input--negative` for standard radioboxes on dark background

<Canvas style={{ backgroundColor: '#2f4356' }}>
  <input type="radio" class="input--negative input--base" />
</Canvas>

## Radio disabled state

- `input--disabled` or `disabled state on the input` to add the disabled style

<Canvas>
  <input type="radio" class="input--outline input--base" disabled />
  <input type="radio" class="input--outline input--base" disabled checked />
  <input type="radio" class="input--negative input--base" disabled />
  <input type="radio" class="input--negative input--base" disabled checked />
</Canvas>

## Sizes

For size variations, the following css classes are built:

- `input--sm` for small inputs
- `input--base` for standard size
- `input--lg` for large inputs

<Canvas>
  <input type="radio" class="input--outline input--sm" value="input--sm" />
  <input type="radio" class="input--outline input--base" value="input--base" />
  <input type="radio" class="input--outline input--lg" value="input--lg" />
</Canvas>

# Multiple radios
It's recommanded to wrap the radio inputs in a `fieldset` element, with a `legend` element as a title.
Check the [Fieldset documentation](/docs/components-form-fieldset--example-radio) for more information.

## Markup example

```html
<fieldset class="form__group">
  <legend class="form__group__legend text--asterisk">
    Radio button group legend
    <span class="sr-only">required</span>
  </legend>
  <div class="form__group__radio">
    <input
      type="radio"
      id="radio-0"
      name="radio-group-1"
      required="required"
      class="input input--outline"
      value="value-1"
    />
    <label for="radio-0" class="text--asterisk">
      Label for value one
      <span class="sr-only">required</span>
    </label>
  </div>
  <div class="form__group__radio">
    <input
      type="radio"
      id="radio-1"
      name="radio-group-1"
      required="required"
      class="input input--outline"
      value="value-2"
    />
    <label for="radio-1" class="text--asterisk">
      Label for value two
      <span class="sr-only">required</span>
    </label>
  </div>
</fieldset>
```

## Required radio

If the radio is mandatory:
- a `required` attribute is added to the input element
- an asterisk is displayed right after the legend. This can be done by adding a `text--asterisk` class on the legend element.
- the word “required“ is added to the legend for screen readers. This can be done by wrapping the word into a `.sr-only` element.

<Canvas>
<fieldset class="form__group">
  <legend class="form__group__legend text--asterisk">
    Radio group legend <span class="sr-only">required</span>
  </legend>
  <div class="form__group__radio">
    <input type="radio" id="radio-0" name="radio-group-1" class="input input--outline " value="value-0" />
    <label for="radio-0" class="">
      Label for value one
    </label>
  </div>
  <div class="form__group__radio">
    <input type="radio" id="radio-1" name="radio-group-1" class="input input--outline " value="value-1" />
    <label for="radio-1" class="">
      Label for value two
    </label>
  </div>
  <div class="form__group__radio">
    <input type="radio" id="radio-2" name="radio-group-1" class="input input--outline " value="value-2" />
    <label for="radio-2" class="">
      Label for value three
    </label>
  </div>
</fieldset>
</Canvas>

## Messages

If the radio has error, an `input--error` class is added to the input element. Additionally
a `badge badge--sm badge--error` element wraps the error message, right after the input element:

<Canvas>
<fieldset class="form__group">
  <legend class="form__group__legend text--asterisk">
    Radio group legend <span class="sr-only">required</span>
  </legend>
  <div class="form__group__radio">
    <input type="radio" id="radio-10" name="radio-group-2" class="input input--outline input--error" value="value-0" />
    <label for="radio-10" class="">
      Label for value one
    </label>
  </div>
  <div class="form__group__radio">
    <input type="radio" id="radio-11" name="radio-group-2" class="input input--outline input--error" value="value-1" />
    <label for="radio-11" class="">
      Label for value two
    </label>
  </div>
  <div class="form__group__radio">
    <input type="radio" id="radio-12" name="radio-group-2" class="input input--outline input--error" value="value-2" />
    <label for="radio-12" class="">
      Label for value three
    </label>
  </div>
  <div class="badge badge--sm badge--error">
    This field is required
  </div>
</fieldset>
</Canvas>
